<script setup>
import { watch, ref } from 'vue'

const props = defineProps({
    menus: Array,
    collapsed: Boolean,
    width: Number,
    accordion: Boolean
})
// 设置初始值
// 侧边菜单是否折叠
const collapsed = ref(false)
// 侧边栏菜单列表
const menus = ref([])
// 侧边栏宽度 
const width = ref(200)
const accordion = ref(true)
const siderMenu = ref()
const collapsedStyle = {
    'padding': '14px 24px',
    'height': '52px',
    'overflow': 'hidden'
}
// 切换折叠
watch(() => props.collapsed, () => {
    // 根据折叠状态 持续获取最新值
    collapsed.value = props.collapsed
    menus.value = props.menus
    width.value = props.width
    accordion.value = props.accordion
    // 根据当前 折叠状态 改变arrow图标的显示状态
    if (siderMenu.value) {
        const arrow_icons = siderMenu.value.querySelectorAll('.ivu-icon-ios-arrow-down')
        for (let icon of arrow_icons) {
            if (collapsed.value) {
                icon.style.display = 'none'
            } else {
                // 延迟显示
                setTimeout(() => {
                    icon.style.display = 'block'
                }, 500)
            }
        }
    }
}, {
    immediate: true
})
</script>

<template>
    <div ref="siderMenu" class="w-100 h-100 container scrollbar">
        <Menu :active-name="menus[0].children ? '1-1' : '1'" theme="light" :width="width + 'px'" :open-names="['1']" :accordion="accordion"
            :style="{ transition: 'all 0.6s linear' }">
            <template v-for="menu, index in menus" :key="index">
                <Submenu v-if="menu.children" :name="'' + (index + 1)">
                    <template #title>
                        <div class="w-100" style="height: 24px;text-wrap: nowrap;">
                            <Icon :type="menu.icon"></Icon>
                            <span v-show="!collapsed" style="padding-left: 10px;">{{ menu.name }}</span>
                        </div>
                    </template>
                    <template v-for="menuItem, itemindex in menu.children" :key="'menuitem' + itemindex">
                        <MenuItem :name="(index + 1) + '-' + (itemindex + 1)" :style="collapsed ? collapsedStyle : {}"
                            :to="menuItem.to">
                        <Icon v-show="collapsed" :type="menuItem.icon"></Icon>
                        <Transition name="slide-fade">
                            <span v-show="!collapsed" style="height: 24px;text-wrap: nowrap;">{{ menuItem.name }}</span>
                        </Transition>
                        </MenuItem>
                    </template>
                </Submenu>
                <MenuItem v-else :name="'' + (index + 1)" :style="collapsed ? collapsedStyle : {}" :to="menu.to">
                <div class="w-100" style="height: 24px;overflow: hidden;text-wrap: nowrap;">
                    <Icon :type="menu.icon ? menu.icon : 'md-home'" :style="{ 'margin-right': '0px', visibility: menu.icon ? 'visible' : 'hidden'}"></Icon>
                    <Transition name="slide-fade">
                        <span v-show="!collapsed" style="padding-left: 10px;">{{ menu.name }}</span>
                    </Transition>
                </div>
                </MenuItem>
            </template>
        </Menu>
    </div>
</template>

<style lang="less" scoped>
.container {
    background: #fcfcfc;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-bottom: 52px;
    user-select: none;
}

.scrollbar::-webkit-scrollbar {
    width: 3px;
    background: lightgray;
    visibility: hidden;
    
}
.scrollbar:hover::-webkit-scrollbar {
    visibility: visible;
}

.scrollbar::-webkit-scrollbar-thumb {
    background: white;
    border: 1px solid lightgray;
    visibility: hidden;
}
.scrollbar:hover::-webkit-scrollbar-thumb {
    visibility: visible;
}

.slide-fade-enter-active {
    transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-leave-active {
    transition: all 0.5s ease-in-out;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateX(20px);
    opacity: 0;
}
</style>
